<template>
  <div class="taber">
    <router-link to="/home"><i class="mui-icon mui-icon-home"></i><p>首页</p></router-link>
    <!-- <button @click=hedle()>首页</button> -->
    <router-link to="/categrog"><i class="mui-icon mui-icon-bars"></i><p>分类</p></router-link>
    <router-link to="/car"><i class="mui-icon mui-icon-spinner mui-spin"></i><p>购物车</p></router-link>
    <router-link to="/profile"><i class="mui-icon mui-icon-personadd"></i><p>我的</p></router-link>
  </div>
</template>

<script>
export default {
  name: 'Taber',
  data () {
    return {  
      userId:"ls"
    }
  },
  methods:{
    hedle(){
      this.$router.push("home");
      console.log(this.$router)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* @import '../lib/mui/css/mui.css'; */
/* @import '../lib/fa/css/font-awesome.css'; */
.taber{
  width: 100%;
  height:49px;
  position:fixed;
  left:0px;
  bottom:0px;
  background:#0bdbca;
  display:flex;
  border-top:1px solid rgb(12, 221, 57);
  z-index: 999;
}
.taber a{
  flex:1;
  /* border:1px solid red; */
  text-align:center;
  color:white;
  padding-top:5px;
}
.taber a p{
  font-size:18px;
  color:#0e0d0d;
  margin:0;

}
.taber .router-link-active{
  color:red;
  background:#f3eeee;
}
.taber .router-link-active p{
   color:red;
}


</style>
